<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="1024"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <!-- <sc-water-mark ref="wm" text="已审核" subtext="誉卓纱线"> -->
    <sk-tabs type="border-card">
      <el-tab-pane ref="tab" label="基础信息">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form
          :model="form"
          :rules="rules"
          ref="dialogForm"
          label-width="70px"
          label-position="right"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="单据日期" prop="billdate">
                <el-date-picker
                  v-model="form.billdate"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
                <!-- <el-input label="单据日期" v-model="form.code" clearable></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="编号" prop="code">
                <el-input v-model="form.code" disabled placeholder="自动生成"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户" prop="customer_id">
                <el-input v-model="form.customer.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品" prop="material_id">
                <el-input v-model="form.material.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="形态" prop="type_id">
                <el-input v-model="form.type.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位" prop="unit_id">
                <el-input v-model="form.unit.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="等级" prop="grade">
                <el-input v-model="form.grade" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="数量" prop="quantity">
                <el-input v-model="form.quantity" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="操作前卷" prop="reelcount">
                <el-input v-model="form.reelcount" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="操作后卷" prop="newreelcount">
                <el-input v-model="form.newreelcount" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="库位" prop="location_id">
                <skAutoChoose
                  v-model="form.location.name"
                  :name="'location'"
                  :assign="form"
                >
                </skAutoChoose>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <sc-VxeTable
                ref="save"
                :gridOps="gridOps"
                :gridEvts="gridEvts"
                :data="form.struct_storage"
                :tablecode="'storage_action_reelstruct_save'"
              >
              </sc-VxeTable>
            </el-col>
            <el-col :span="12">
              <sc-VxeTable
                ref="save"
                :gridOps="gridOps"
                :gridEvts="gridEvts"
                :data="form.struct_new_storage"
                :tablecode="'storage_action_newreelstruct_save'"
              >
              </sc-VxeTable>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </sk-tabs>
    <!-- </sc-water-mark> -->
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
  <skBrowserChoose
    v-model="openChooseDlg"
    :name="'storage_browser'"
    @close="openChooseDlg = false"
    @select="additems"
    :params="getParams"
  >
  </skBrowserChoose>
</template>

<script>
import XEUtils from "xe-utils";
import skBrowserChoose from "@/components/skBrowserChoose";
import skAutoChoose from "@/components/skAutoChoose";
export default {
  emits: ["success", "closed"],
  components: { skBrowserChoose, skAutoChoose },
  data() {
    return {
      mode: "add",
      dialogImageUrl: "",
      dialogVisible: false,
      openChooseDlg: false,
      gridOps: {
        columns: [],
        height: 300,
      },
      gridEvts: {
        choose: () => (this.openChooseDlg = true),
        beforeAddRow: row => {
          if (this.form.material_id == null) {
            this.$message.error("必须先选择库存！");
            return false;
          }
          row.material_id = this.form.material_id;
          row.customer_id = this.form.customer_id;
          row.type_id = this.form.type_id;
          row.unit_id = this.form.unit_id;
          row.location_id = this.form.location_id;
          row.color_name = this.form.color_name;
          row.dyelot = this.form.dyelot;
          row.custno = this.form.custno;
          row.iscustomer = this.form.iscustomer;
          row.company_id = this.form.company_id;
          row.craft = this.form.craft;
          row.sample_data = this.form.sample_data;
          row.orderno = this.form.orderno;
          console.log(this.form);
          row["quantity"] =
            this.form.quantity -
            this.form.struct_new_storage
              .reduce((sum, v) => sum + parseFloat(v.quantity), 0)
              .toFixed(2);
          row["quantity"] =
            this.form.quantity -
            this.form.struct_new_storage
              .reduce((sum, v) => sum + parseFloat(v.quantity), 0)
              .toFixed(2);
          row["auxiliary_quantity"] =
            this.form.auxiliary_quantity -
            this.form.struct_new_storage
              .reduce((sum, v) => sum + parseFloat(v.auxiliary_quantity), 0)
              .toFixed(2);
          row["reel"] = this.form.struct_new_storage.length + 1;
          row["auxiliary_quantity"] =
            row["auxiliary_quantity"] >= 0 ? row["auxiliary_quantity"] : 0;
          row["quantity"] = row["quantity"] >= 0 ? row["quantity"] : 0;
        },
      },
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      dyelot: {},
      form: {
        id: "",
        billdate: XEUtils.toDateString(new Date(), "yyyy-MM-dd"),
        customer: {},
        material: {},
        unit: {},
        location: {},
        location_id: null,
        type: {},
        struct_storage: [],
        struct_new_storage: [],
      },
      rules: {
        billdate: { required: true, message: "请选择单据日期" },
        location_id: { required: true, message: "请选择库位" },
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {},
  watch: {
    "form.struct_storage": {
      handler(val) {
        this.form.reelcount = val.length;
        this.form.quantity = val
          .reduce((sum, v) => sum + parseFloat(v.quantity), 0)
          .toFixed(2);
        this.form.auxiliary_quantity = val
          .reduce((sum, v) => sum + parseFloat(v.auxiliary_quantity), 0)
          .toFixed(2);

        this.form.dyelot = val.map(v => v.dyelot).join("+");
      },
      deep: true,
    },
    "form.struct_new_storage": {
      handler(val) {
        this.form.newreelcount = val.length;
      },
      deep: true,
    },
    "form.location_id": {
      handler(val) {
        this.form.struct_new_storage.filter(v => (v.location_id = val));
      },
      deep: true,
    },
  },

  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    getParams() {
      if (this.form.material_id != null)
        return {
          material_id: this.form.material_id,
          customer_id: this.form.customer_id,
          type_id: this.form.type_id,
          unit_id: this.form.unit_id,
        };
    },
    additems(data) {
      data.filter(v => {
        if (this.form.material_id == null) {
          this.form.material_id = v.material_id;
          this.form.customer_id = v.customer_id;
          this.form.type_id = v.type_id;
          this.form.unit_id = v.unit_id;

          this.form.material = v.material;
          this.form.customer = v.customer;
          this.form.type = v.type;
          this.form.unit = v.unit;
          this.form.custno = v.custno;
          this.form.iscustomer = v.iscustomer;
          this.form.company_id = v.company_id;

          this.form.color_name = v.color_name;
          this.form.grade = v.grade;

          this.form.craft = v.craft;
          this.form.sample_data = v.sample_data;
          this.form.orderno = v.orderno;
        }
        if (v.material_id != this.form.material_id) {
          return this.$message.error("操作失败，产品不一致无法操作");
        }
        if (v.customer_id != this.form.customer_id) {
          return this.$message.error("操作失败，客户不一致无法操作");
        }
        if (v.type_id != this.form.type_id) {
          return this.$message.error("操作失败，形态不一致无法操作");
        }
        if (v.color_name != this.form.color_name) {
          return this.$message.error("操作失败，颜色不一致无法操作");
        }
        if (v.unit_id != this.form.unit_id) {
          return this.$message.error("操作失败，单位不一致无法操作");
        }
        if (v.grade != this.form.grade) {
          return this.$message.error("操作失败，等级不一致无法操作");
        }
        v.quantity = v.available_quantity;
        v.auxiliary_quantity = v.available_auxiliary_quantity;
        this.form.struct_storage.push(v);
      });
      this.openChooseDlg = false;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          if (
            Math.abs(
              this.form.quantity -
                this.form.struct_new_storage
                  .reduce((sum, v) => sum + parseFloat(v.quantity), 0)
                  .toFixed(2)
            ) > 10
          )
            return this.$message.error("无法保存，操作后分卷合卷库存数不一致！");
          this.isSaveing = true;
          var res = await this.$API.storage.reelstruct.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          }
        }
      });
    },
    async getItems(id) {
      var res = await this.$API.storage.reelstruct.info.get({
        filter: [{ id: id }],
      });
      if (res.code == 200) {
        Object.assign(this.form, this.$TOOL.removeNull(res.data));
      }
    },
    //表单注入数据
    setData(data) {
      this.getItems(data.id);
    },
  },
};
</script>

<style></style>
